<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.account" placeholder="请输入工号/学号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="selectQueryYear" type="year" placeholder="选择年" :clearable="false" :editable="false" style="width: 100px" />
			</el-form-item>
			<el-form-item>
				<sw-search-tree-select v-bind="treeConfig" v-model="queryData.deptId" :tree-data="departTree" :default-props="defaultProps" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-upload2" plain @click="handleExportUserDuration()">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" :data="tableListData" stripe height="100%">
			<el-table-column type="index" label="序号" width="50" align="center" />
			<el-table-column label="状态" width="100">
				<template slot-scope="{ row }">
					<el-tag type="success" v-if="row.isPass">已达标</el-tag>
					<el-tag type="danger" v-else>未达标</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="account" label="工号/学号" min-width="160" />
			<el-table-column prop="totalStudyDuration" label="学习时长" min-width="100" />
			<el-table-column prop="departName" label="用户部门" min-width="160" />
			<el-table-column label="操作" width="100">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="primary" @click="handleLookUserDetail(row)">查看详情</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<duration-detail v-model="detailDialog" :data="userData" :year="yearString"></duration-detail>
	</sw-common-frame>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import durationDetail from './detail';
import listMixins from '@/mixins/listMixins';
import { queryUserDuration, exportDurationUser } from '@/api/system/tbSysUser';
export default {
	mixins: [listMixins],
	consts: ['PASS_DURATION'],
	components: { durationDetail },
	data() {
		return {
			treeConfig: {
				clearable: true,
				placeholder: '请选择单位',
				popperAppendToBody: true,
				style: { width: '240px' }
			},
			defaultProps: {
				label: 'name',
				children: 'childList'
			},
			selectQueryYear: moment().format('YYYY'),
			detailDialog: false,
			userData: {}
		};
	},
	computed: {
		...mapGetters(['departTree']),
		listFunction() {
			return eval(queryUserDuration);
		},
		yearString() {
			return moment(this.selectQueryYear).format('YYYY');
		},
		dateRange() {
			let yearMoment = moment(this.selectQueryYear);
			let endTime = yearMoment.endOf('year').format('YYYY-MM-DD HH:mm:ss');
			let startTime = yearMoment.startOf('year').format('YYYY-MM-DD HH:mm:ss');
			return { startTime, endTime };
		},
		requestParams() {
			return { ...this.queryData, ...this.dateRange };
		},
		departFlatData() {
			return this.$treeToFlat(this.departTree, 'childList');
		},
		tableListData() {
			return this.tableData.map((item) => {
				let duration = parseFloat(item.totalStudyDuration || '0');
				let passDuration = parseFloat(this.dictData['PASS_DURATION']);
				let depart = this.departFlatData.find((n) => n.id === item.deptId);
				let departName = !depart ? '' : depart.deptFullnamepath.slice(1, -1);
				let isPass = passDuration > 0 && duration >= passDuration;
				return { ...item, departName, isPass, disabled: duration === 0 };
			});
		}
	},
	methods: {
		//格式化导出参数
		formatExportParams() {
			let params = { ...this.queryData };
			params['startTime'] = this.startTime;
			params['endTime'] = this.endTime;
			delete params.page;
			delete params.limit;
			return params;
		},

		//导出用户学习时长数据
		async handleExportUserDuration() {
			let params = this.formatExportParams();
			let result = await exportDurationUser(params).then((res) => res.data);
			let elink = document.createElement('a');
			elink.download = `${this.yearString}年度学员在线培训情况`;
			elink.style.display = 'none';
			elink.href = URL.createObjectURL(result);
			document.body.appendChild(elink);
			elink.click();
			document.body.removeChild(elink);
		},

		//查看用户学习时长详情
		handleLookUserDetail(data) {
			this.detailDialog = true;
			this.userData = { ...data };
		}
	}
};
</script>

<style lang="scss" scoped></style>
